<template>
  <el-dialog :visible="printOutVisible" :center="true" width="70%" :show-close="false">
    <div id="printArea">
        <h3 style="text-align: center">出库单</h3>
    <el-row>
      <el-col>单位:{{ company }}</el-col>
      <el-col>日期:{{ date }}</el-col>
      <el-col>单号:{{ serialNumber }}</el-col>
    </el-row>
    <el-table :data="outboundData" :border="true" size="mini">
      <el-table-column label="序号" type="index" min-width="5%"></el-table-column>
      <el-table-column label="名称" prop="name" min-width="20%"></el-table-column>
      <el-table-column label="物料编码" prop="code" min-width="15%"></el-table-column>
      <el-table-column label="规格/型号" prop="model" min-width="30%"></el-table-column>
      <el-table-column label="单位" prop="unit" min-width="5%"></el-table-column>
      <el-table-column label="数量" prop="number" min-width="5%"></el-table-column>
      <el-table-column label="未税单价" prop="unitPriceBeforeTax" v-if=false ></el-table-column>
      <el-table-column label="总金额" prop="amountBeforeTax" v-if=false></el-table-column>
      <el-table-column label="项目号" prop="project" min-width="20%"></el-table-column>
<!--      <el-table-column label="出库地点" prop="positionId" v-if=false></el-table-column>-->
      <el-table-column label="保管人" prop="custodian" v-if=false></el-table-column>
    </el-table>
    <el-row>
      <el-col>领用:{{ recipient }}</el-col>
      <el-col>审核:{{ reviewer }}</el-col>
      <el-col>出库:{{ custodian }}</el-col>
<!--      <el-col>领用:{{ recipient }}</el-col>-->
    </el-row>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="printOutbound" size="mini">打 印</el-button>
      <el-button type="primary" @click="exportExcel" size="mini">导 出</el-button>
      <el-button type="primary" @click="cancle" size="mini">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import printJS from 'print-js'
import * as XLSX from 'xlsx'
export default {
  name: "PrintOutbound",
  data() {
    return {
      company: '赛福斯特',
      date: new Date().toISOString().slice(0, 10),
      outboundData: [],
      printOutVisible: true,
      processInstanceId: this.$route.params.processInstanceId, // 获取路由参数
      recipient: '',
      reviewer: '',
      custodian:'',
      serialNumber:''
    }
  },
  methods: {
    printOutbound() {
      printJS({
        printable:'printArea',
        type:'html',
        style: `
        .h3{align:center;}
        .el-row{display:flex;justify-content:space-between; font-size:12px; padding:10px;}
          .el-table { font-size: 14px; width: 100%;}
          .el-table tr th, .el-table tr td { padding: 5px 10px; white-space: nowrap;  border-collapse: collapse !important;
           line-height:20px; text-align:left; border:1px solid #eee; font-weight:100;}
          .el-dialog { width: 100%; margin: 0; padding: 0;}
        `,
        scanStyles: false,
      })
      console.log("打印完成")
      this.printOutVisible = false
      this.$router.push({name:'WMS'})
    },
    cancle() {
      this.printOutVisible = false
      this.$router.push({name:'WMS'})
    },
    exportExcel() {
      // 1. 表头信息
      const topRow = [
        `单位:${this.company || ''}`,
        `日期:${this.date || ''}`,
        `单号:${this.serialNumber || ''}`
      ]

      // 2. 表格表头
      const tableHeader = [
        '序号', '名称', '物料编码', '规格/型号', '单位', '数量', '项目号'
      ]

      // 3. 表格数据
      const tableData = this.outboundData.map((item, idx) => [
        idx + 1,
        item.name,
        item.code,
        item.model,
        item.unit,
        item.number,
        item.project
      ])

      // 4. 表尾信息
      const bottomRow = [
        `领用:${this.recipient || ''}`,
        `审核:${this.reviewer || ''}`,
        `保管:${this.custodian || ''}`
      ]

      // 5. 组装所有数据
      const wsData = [
        topRow,                // 第一行：表头信息
        [],                    // 空行
        tableHeader,           // 表格表头
        ...tableData,          // 表格数据
        [],                    // 空行
        bottomRow              // 最后一行：表尾信息
      ]

      // 6. 创建工作表和工作簿
      const ws = XLSX.utils.aoa_to_sheet(wsData)
      const wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, ws, '出库单')

      // 7. 导出
      XLSX.writeFile(wb, `出库单_${this.serialNumber || ''}.xlsx`)
    }
  },
  mounted() {
    const processInstanceId = this.processInstanceId
    console.log(processInstanceId)
    this.$http.post(`/material/outbound/print/${processInstanceId}`).then((response) => {
      if (response.data.code == 1) {
        this.outboundData = response.data.data
        this.recipient = this.outboundData[0].recipient
        this.reviewer = this.outboundData[0].reviewer
        this.custodian = this.outboundData[0].custodian
        this.serialNumber = this.outboundData[0].serialNumber
        console.log(this.outboundData)
      } else {
        console.log("获取出库单数据失败")
      }
    })
  }
}
</script>

<style scoped>

</style>
